<template>
  <adaptive-view>
    <dv-border-box11 title="综合数据驾驶舱" :title-width="400" class="main-container">
      <!-- 第一行 - 核心指标卡片 -->
      <div class="content-row">
        <div class="stat-card" v-for="(item, index) in statsCards" :key="index">
          <dv-border-box8 class="card-box">
            <div class="card-header">{{ item.title }}</div>
            <div class="card-value">
              <count-to
                :start-val="0"
                :end-val="item.value"
                :duration="2500"
                separator=","
                class="card-number"
              />
              <div class="card-unit">{{ item.unit }}</div>
            </div>
            <div class="card-footer">
              <span :class="['trend', item.trend > 0 ? 'up' : 'down']">
                {{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%
              </span>
              <span class="period">较上月</span>
            </div>
          </dv-border-box8>
        </div>
      </div>

      <!-- 第二行 - 图表展示 -->
      <div class="content-row chart-row">
        <!-- 用户趋势图 -->
        <dv-border-box1 class="chart-container left-chart">
          <div class="chart-title">用户增长趋势</div>
          <echart-wrapper
            :options="userTrendOptions"
            height="240px"
            ref="userTrendChart"
          />
        </dv-border-box1>

        <!-- 地区分布 -->
        <dv-border-box7 class="chart-container middle-chart">
          <div class="chart-title">地区分布</div>
          <echart-wrapper
            :options="regionOptions"
            height="240px"
            ref="regionChart"
          />
        </dv-border-box7>

        <!-- 访问渠道 -->
        <dv-border-box4 class="chart-container right-chart">
          <div class="chart-title">访问渠道占比</div>
          <echart-wrapper
            :options="channelOptions"
            height="240px"
            ref="channelChart"
          />
        </dv-border-box4>
      </div>

      <!-- 第三行 - 实时数据和排行榜 -->
      <div class="content-row bottom-row">
        <!-- 实时访问数据 -->
        <dv-border-box13 class="realtime-container">
          <div class="chart-title">实时访问数据</div>
          <echart-wrapper
            :options="realtimeOptions"
            height="240px"
            ref="realtimeChart"
          />
        </dv-border-box13>

        <!-- 排行榜 -->
        <dv-border-box12 class="rank-container">
          <div class="chart-title">热门功能排行</div>
          <div class="rank-list-wrapper">
            <dv-scroll-board :config="rankConfig" />
          </div>
        </dv-border-box12>
      </div>
    </dv-border-box11>
  </adaptive-view>
</template>

<script>
import AdaptiveView from '@/components/AdaptiveView'
import EchartWrapper from '@/components/EchartWrapper'
import CountTo from '@/components/CountTo'
import { getDataScreenStats, getDataScreenRealtime } from '@/api/dashboard'

export default {
  name: 'DataScreen',
  components: {
    AdaptiveView,
    EchartWrapper,
    CountTo
  },
  data() {
    return {
      // 核心指标卡片数据
      statsCards: [
        { title: '总用户数', value: 8654, unit: '人', trend: 12.3 },
        { title: '今日访问量', value: 2451, unit: '次', trend: 8.5 },
        { title: '业务办理量', value: 368, unit: '件', trend: -3.2 },
        { title: '系统负载率', value: 68, unit: '%', trend: 5.7 }
      ],

      // 统计数据
      statistics: {
        userCount: 0,
        visitCount: 0,
        orderCount: 0,
        systemLoad: 0
      },
      
      // 用户趋势图配置
      userTrendOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            lineStyle: {
              color: '#1eb0fb'
            }
          },
          axisLabel: {
            color: '#b7d8fa'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(11, 35, 74, 0.5)'
            }
          },
          axisLabel: {
            color: '#b7d8fa'
          }
        },
        series: [
          {
            name: '新增用户',
            type: 'bar',
            barWidth: '40%',
            data: [120, 132, 181, 134, 290, 230],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#1eb0fb' },
                  { offset: 1, color: '#185cff' }
                ]
              }
            }
          },
          {
            name: '活跃用户',
            type: 'line',
            data: [220, 282, 391, 234, 390, 330],
            lineStyle: {
              color: '#fb7103'
            },
            itemStyle: {
              color: '#fb7103'
            }
          }
        ]
      },

      // 地区分布图配置
      regionOptions: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          textStyle: {
            color: '#b7d8fa'
          }
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#0f1624',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                color: '#ffffff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '华东' },
              { value: 735, name: '华北' },
              { value: 580, name: '华南' },
              { value: 484, name: '西南' },
              { value: 300, name: '西北' }
            ]
          }
        ]
      },

      // 访问渠道占比配置
      channelOptions: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle: {
            color: '#b7d8fa'
          }
        },
        series: [
          {
            name: '访问渠道',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: [
              { value: 1548, name: '微信公众号' },
              { value: 735, name: '网站' },
              { value: 580, name: 'APP' },
              { value: 300, name: '其他' }
            ],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            }
          }
        ]
      },

      // 实时访问数据配置
      realtimeOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59'],
          axisLine: {
            lineStyle: {
              color: '#1eb0fb'
            }
          },
          axisLabel: {
            color: '#b7d8fa'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(11, 35, 74, 0.5)'
            }
          },
          axisLabel: {
            color: '#b7d8fa'
          }
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(128, 255, 165, 0.5)' },
                  { offset: 1, color: 'rgba(1, 191, 236, 0)' }
                ]
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210],
            lineStyle: {
              width: 2,
              color: '#00eaff'
            }
          }
        ]
      },

      // 排行榜配置
      rankConfig: {
        header: ['排名', '功能名称', '访问次数'],
        data: [
          ['1', '用户管理', '12,361'],
          ['2', '系统监控', '10,252'],
          ['3', '数据分析', '9,385'],
          ['4', '文件管理', '8,473'],
          ['5', '权限管理', '7,564'],
          ['6', '字典管理', '6,852'],
          ['7', '日志查询', '5,341'],
          ['8', '参数设置', '4,213']
        ],
        index: true,
        columnWidth: [60, 180, 100],
        align: ['center', 'left', 'center'],
        rowNum: 7,
        headerHeight: 40,
        headerBGC: 'rgba(0, 0, 0, 0.2)',
        oddRowBGC: 'rgba(17, 34, 51, 0.3)',
        evenRowBGC: 'rgba(26, 54, 93, 0.3)',
        headerFontSize: 14,
        bodyFontSize: 13
      },
      
      // 排行榜数据
      rankingList: [],
      
      // 定时器ID
      timer: null
    }
  },
  mounted() {
    this.fetchData()
    // 每60秒刷新一次数据
    this.timer = setInterval(() => {
      this.fetchData()
    }, 60000)
  },
  beforeUnmount() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 获取数据
    fetchData() {
      this.fetchStatistics()
      this.fetchRealtime()
    },
    
    // 获取统计数据
    fetchStatistics() {
      getDataScreenStats().then(response => {
        if (response.code === 200) {
          const data = response.data || {};
          
          // 更新统计卡片数据
          this.statsCards[0].value = data.userCount || 0;
          this.statsCards[1].value = data.todayNewUsers || 0;
          
          // 更新图表数据
          if (data.userTrend) {
            this.userTrendOptions.xAxis.data = data.userTrend.dates || [];
            this.userTrendOptions.series[0].data = data.userTrend.newUsers || [];
            this.userTrendOptions.series[1].data = data.userTrend.activeUsers || [];
            this.$nextTick(() => {
              this.$refs.userTrendChart && this.$refs.userTrendChart.refreshChart();
            });
          }
          
          // 更新地区分布图数据
          if (data.regionData) {
            this.regionOptions.series[0].data = data.regionData || [];
            this.$nextTick(() => {
              this.$refs.regionChart && this.$refs.regionChart.getInstance().setOption(this.regionOptions);
            });
          }
          
          // 更新访问渠道数据
          if (data.channelData) {
            this.channelOptions.series[0].data = data.channelData || [];
            this.$nextTick(() => {
              this.$refs.channelChart && this.$refs.channelChart.getInstance().setOption(this.channelOptions);
            });
          }
          
          // 更新排行榜数据
          if (data.rankingList && data.rankingList.length > 0) {
            const rankData = data.rankingList.map((item, index) => {
              return [String(index + 1), item.name, String(item.value)];
            });
            this.rankConfig.data = rankData;
          }
        }
      });
    },
    
    // 获取实时数据
    fetchRealtime() {
      getDataScreenRealtime().then(response => {
        if (response.code === 200) {
          const data = response.data || {};
          
          // 更新系统负载
          if (data.systemLoad) {
            this.statsCards[3].value = Math.round(data.systemLoad);
          }
          
          // 更新在线用户数
          if (data.onlineUsers) {
            this.statsCards[2].value = data.onlineUsers;
          }
          
          // 更新实时数据图表
          if (data.realtimeData) {
            const time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit'});
            
            // 移除旧数据，保持数据量稳定
            if (this.realtimeOptions.series[0].data.length >= 10) {
              this.realtimeOptions.xAxis.data.shift();
              this.realtimeOptions.series[0].data.shift();
            }
            
            // 添加新数据
            this.realtimeOptions.xAxis.data.push(time);
            this.realtimeOptions.series[0].data.push(data.memoryUsage || 0);
            
            this.$nextTick(() => {
              this.$refs.realtimeChart && this.$refs.realtimeChart.getInstance().setOption(this.realtimeOptions);
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.main-container {
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  width: 100%;
  height: 100%;
}

.content-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* 统计卡片样式 */
.stat-card {
  width: 24%;
  height: 120px;
}

.card-box {
  padding: 15px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-header {
  font-size: 16px;
  color: #b0c4de;
}

.card-value {
  display: flex;
  align-items: flex-end;
}

.card-number {
  font-size: 28px;
  font-weight: bold;
  color: #00eaff;
}

.card-unit {
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #b0c4de;
}

.card-footer {
  display: flex;
  align-items: center;
}

.trend {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 8px;
}

.trend.up {
  background-color: rgba(3, 218, 198, 0.2);
  color: #03dac6;
}

.trend.down {
  background-color: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.period {
  font-size: 12px;
  color: #8a9cb1;
}

/* 图表行样式 */
.chart-row {
  height: 280px;
}

.chart-container {
  padding: 15px;
  box-sizing: border-box;
}

.left-chart {
  width: 38%;
}

.middle-chart {
  width: 30%;
}

.right-chart {
  width: 30%;
}

.chart-title {
  font-size: 16px;
  color: #b0c4de;
  margin-bottom: 10px;
  text-align: center;
}

/* 底部行样式 */
.bottom-row {
  height: 280px;
}

.realtime-container {
  width: 58%;
  padding: 15px;
  box-sizing: border-box;
}

.rank-container {
  width: 40%;
  padding: 15px;
  box-sizing: border-box;
}

.rank-list-wrapper {
  height: 230px;
  overflow: hidden;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .content-row {
    flex-direction: column;
  }
  
  .stat-card {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .chart-row {
    height: auto;
  }
  
  .left-chart, .middle-chart, .right-chart {
    width: 100%;
    margin-bottom: 10px;
    height: 250px;
  }
  
  .bottom-row {
    height: auto;
  }
  
  .realtime-container, .rank-container {
    width: 100%;
    margin-bottom: 10px;
    height: 280px;
  }
}
</style> 